<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no"/>
    <title>预约详情</title>
    <link rel="stylesheet" href="css/reset.css"/>
    <link rel="stylesheet" href="icon/iconfont.css"/>
    <style>
        .top-line:after{content: '';position: absolute;left: 0;top: 0;right: auto;bottom: auto;height: 1px;width: 100%;background-color: #454545;
            display: block;z-index: 0;-webkit-transform-origin: 50% 0%;transform-origin: 50% 0%;transform: scale(1,.5);-webkit-transform: scale(1,.5);
        }
        .personal-list{}
        .personal-list li{padding: 0.8rem 0.5rem;background-color: #2c2c32;overflow: hidden;position: relative;}
        .personal-list .img-box{float: left;position: relative;width: 3.5rem;height: 3.5rem;}
        .personal-list .img-box img{display: block;width: 3.5rem;height: 3.5rem;}
        .personal-list .img-box .img-tip{color: #fff;position: absolute;right: 0;bottom: 0;font-size: 0.6rem;
            padding:0.1rem 0.3rem;border-radius: 0.8rem;}
        .personal-list .img-box .img-tip i{font-size: 0.6rem;}
        .personal-list .img-box .women{background-color: #f361a2;}
        .personal-list .middle-words{float: left;margin-left: 0.5rem;}
        .personal-list .middle-words h1{font-size: 0.6rem;color: #fbb701;font-weight: normal;margin-top: 0.3rem;}
        .personal-list .middle-words h1 span{font-size: 0.7rem;color: #fff;}
        .personal-list .middle-words h1 i{font-size: 0.6rem;}
        .personal-list .middle-words h2{font-weight: normal;font-size: 0.7rem;color: #fbb701;margin-top: 0.3rem;}
        .personal-list .middle-words h3{font-weight: normal;font-size: 0.6rem;color: #999;margin-top: 0.3rem;}
        .place-name{margin-top: 0.5rem;font-size: 0.6rem;}
        .place-name span{font-size: 0.7rem;color: #fff;}
        .arrow-right{}
        .arrow-right i{position: absolute;right: 0.75rem;top: 50%;transform: translateY(-50%);color: #fbb701;font-size: 0.7rem;}
        .reserve-time{background-color: #2c2c32;height: 1.8rem;line-height: 1.8rem;padding: 0 0.5rem;position: relative;}
        .reserve-time .left{float: left;font-size: 0.7rem;color: #fff;}
        .reserve-time .left i{color: #fbb701;font-size: 0.6rem;margin-right: 0.3rem;}
        .reserve-time .right{float: right;font-size: 0.65rem;color: #fff;}
        .reserve-time .right i{color: #fbb701;font-size: 0.6rem;margin-left: 0.3rem;}

        .content .list{padding-top: 2rem;}
        .content .list ul{padding: 0 1rem 0 6.5rem;}
        .content .list ul li{margin-bottom: 0.75rem;position: relative;}
        .content .list ul li span{position: absolute;left: -3.15rem;font-size: 0.7rem;color: #999;line-height: 0.9rem;}
        .content .list ul li p{color: #eee;font-size: 0.8rem;margin-left: 0.5rem;}
        .content .btn{padding: 0 2rem;margin-top: 1.5rem;}
        .content .btn a{display: block;background-color: #fbb701;color: #fff;font-size: 0.7rem;text-align: center;padding: 0.5rem 0;border-radius: 0.25rem;}
        .content .bottom{font-size: 0.6rem;text-align: center;margin-top: 1.5rem;}
    </style>
</head>
<body>
    <div class="container">
        <div class="personal-list">
            <ul>
                <li>
                    <a href="personal_guide_detail.html">
                        <div class="img-box">
                            <img src="img/personal_guide_img01.png" alt=""/>
                            <p class="img-tip women"><i class="iconfont icon-women"></i>26</p>
                        </div>
                        <div class="middle-words">
                            <h1>
                                <span>Lazar</span>
                                <i class="iconfont icon-star"></i>
                                <i class="iconfont icon-star"></i>
                                <i class="iconfont icon-star"></i>
                                <i class="iconfont icon-star"></i>
                                <i class="iconfont icon-star"></i>
                                5.0
                            </h1>
                            <h2>200~500元/小时</h2>
                            <h3>擅长：减肥塑形、运动康复</h3>
                        </div>
                        <div style="clear: both;"></div>
                        <p class="place-name">服务场馆：<span>KendoTrainingClub、work+私教馆</span></p>
                        <div class="arrow-right">
                            <i class="iconfont icon-arrow"></i>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
        <div class="reserve-time clear top-line">
            <div class="left"><i class="iconfont icon-shijian"></i><span>预约时间</span></div>
            <div class="right"><span>03月16日 12:00-14:00</span><i class="iconfont icon-arrow"></i></div>
        </div>
        <div class="content">
            <div class="list">
                <ul>
                    <li>
                        <span>会员昵称 :</span>
                        <p>Keven</p>
                    </li>
                    <li>
                        <span>联系电话 :</span>
                        <p>13402898938</p>
                    </li>
                    <li>
                        <span>课程类别 :</span>
                        <p>健身</p>
                    </li>
                    <li>
                        <span>预约时间 :</span>
                        <p>3月16 12:00</p>
                    </li>
                    <li>
                        <span>上课地点 :</span>
                        <p>成都市武侯区都城雅颂（南区）荣华路29号</p>
                    </li>
                    <li>
                        <span>合计金额 :</span>
                        <p>￥359</p>
                    </li>
                </ul>
            </div>
            <div class="btn">
                <a href="">信息无误，确定支付</a>
            </div>
            <p class="bottom">开课前半小时后将不能退款</p>
        </div>
    </div>
</body>
</html>